<template>
	<uni-popup ref="popup" type="center">
		<view class="choose-agent-popup">
			<view class="active-count">
				<text class="label">机具数量：</text> <text class="count">{{activeList.length}}</text>台
			</view>
			<view class="choose-agent-part">
				<view class="label">
					接收人:
				</view>
				<view class="choose-btn" @click="()=>{emit('clickChooseAgent')}">
				{{currentAgent?currentAgent.value:'请选择代理商'}}<i class="iconfont icon-arrow-right" />
				</view>
			</view>
			<view class="btn-wrapper">
				<g-button class="cancel-btn" btn_text="取消" :width="282" :height="70" :borderRadius="16" @click="cancel"/>
				<g-button btn_text="确认" :width="282" :height="70" :borderRadius="16" @click="()=>{emit('confirmAppropriate')}"/>
			</view>
		</view>
	</uni-popup>
</template>

<script lang="ts" setup>
	import { onMounted, Ref, ref, defineExpose, defineProps, defineEmits } from 'vue';
	import { IPopupExpose } from '../../types';
	import { IDevice } from '../device-item/types';
	import { ITempItem } from '../agent-list-popup/types';

	const emit = defineEmits(['clickChooseAgent','confirmAppropriate']);

	interface IProps {
		activeList : IDevice[];
		currentAgent : ITempItem | null,
	}

	const props = withDefaults(defineProps<IProps>(), {
		activeList: () => []
	})

	const popup : Ref<null | IPopupExpose> = ref(null);

	onMounted(() => {
		// popup.value?.open();
	})

	const open = () => {
		popup.value?.open();
	}
	
	const close = ()=>{
		popup.value?.close!();
	}
	
	const cancel = ()=>{
		close();
	}
	

	defineExpose<IPopupExpose>({
		open,
		close
	})
</script>

<style scoped lang="scss">
	@import "./chooseAgentPopup.scss";
</style>